/*
 * @Date: 2024-03-25 14:49:50
 * @LastEditors: lyx
 * @LastEditTime: 2024-08-29 13:37:27
 * @FilePath: \taro-template3\src\packageA\components\ChatTable\container.tsx
 * @Description: 
 */
import React, { useEffect } from "react";
import { exportExcel } from "./export";
import { sheetConfig } from './config'
import './container.less'
import { getRowAndCol } from "@/utils/index";
import { useTranslation } from "react-i18next";

interface IProps {
  tableData: any;
  chatInfo: {
    msgId: string;
    dataId: string,
  },
}

const ChatTable: React.FC<IProps> = ({
  chatInfo,
  tableData,
}) => {
  const { t } = useTranslation();
  const idStr = `chat-table-container-luckysheet-${chatInfo.msgId}-${chatInfo.dataId}`
  const downTable = () => {
    exportExcel(tableData.data, tableData.title || 'table', t);
  };
  const hideMoreCell = () => {
    const { row, col } = getRowAndCol()
    window.luckysheet.hideRow(row, 100);
    window.luckysheet.hideColumn(col, 100);
  }
  useEffect(() => {
    console.log('window.luckysheet', window.luckysheet);
    window.luckysheet.create({
      ...sheetConfig,
      ...tableData,
      container: idStr,
      hook: {
        workbookCreateAfter: () => {
          hideMoreCell()
        }
      }
    });
  }, [])
  console.log('window.luckysheet111', window.luckysheet);

  return (
    <div className="chat-table-container">
      <div className="chat-table-head">
        <div>{tableData.title || ''}</div>
        {/* TODO: 下载 在飞书去掉 */}
        {/* <Button type="primary" onClick={downTable}>
          {formatMessage({ id: 'DOWNLOAD' })}
        </Button> */}
      </div>
      <div className="chat-table-body">
        <div id={idStr}></div>
      </div>
    </div>
  );
}

export default ChatTable;
